<template>
	<el-card style="width: 80%;">
		<el-row slot="header" type="flex" class="row-bg" justify="space-between">
			<span>角色列表</span>
			<el-button v-permission="'system:role:create'" icon="el-icon-circle-plus-outline" type="primary" @click="insert_dialog_visible = true" plain>添加角色
			</el-button>
		</el-row>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" type="index" prop="role_id">
			</el-table-column>
			<el-table-column prop="role_name" label="角色名称">
			</el-table-column>
			<el-table-column prop="role_code" label="角色代码">
			</el-table-column>
			<el-table-column prop="role_description" label="角色描述">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-permission="'system:role:edit'" @click="openEditDialog(scope.row)" type="primary" :disabled="scope.row.editable === 0"
						icon="el-icon-edit"></el-button>
					<el-button v-permission="'system:role:remove'" @click="handleRemove(scope.row.role_id, scope.$index)" type="danger"
						:disabled="scope.row.editable === 0" icon="el-icon-delete"></el-button>
					<el-link :href="`/#/system/role/${scope.row.role_id}`" class="limit-link">
						<el-button v-permission="'system:role:auth'" type="warning" plain>
							<i class="el-icon-setting"></i></el-button>
					</el-link>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="添加角色" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
				<el-form-item label="角色名称" prop="role_name">
					<el-input type="text" v-model="insert_form.role_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色代码" prop="role_code">
					<el-input type="text" v-model="insert_form.role_code" autocomplete="off"
						placeholder="请输入大写英文字母"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="role_description">
					<el-input type="text" v-model="insert_form.role_description" autocomplete="off"
						placeholder="请输入角色的说明文字"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleInsert">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="编辑角色" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
				<el-form-item label="角色名称" prop="role_name">
					<el-input type="text" v-model="edit_form.role_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色代码" prop="role_code">
					<el-input type="text" v-model="edit_form.role_code" autocomplete="off"
						placeholder="请输入大写英文字母"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="role_description">
					<el-input type="text" v-model="edit_form.role_description" autocomplete="off"
						placeholder="请输入角色的说明文字"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">确 定</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { Role } from '@/api';
export default {
	data() {
		return {
			tableData: [],
			active: 1,
			insert_form: {
				role_name: '',
				role_code: '',
				role_description: '',
			},
			insert_dialog_visible: false,
			edit_form: {
				role_name: '',
				role_code: '',
				role_description: '',
			},
			edit_dialog_visible: false,
			current_role: '',
			set_dialog_visible: false,
			rules: {
				role_name: [{
					required: true,
					message: '请输入角色名称',
					trigger: 'blur',
				}],
				role_code: [{
					required: true,
					message: '请输入角色代码',
					trigger: 'blur',
					pattern: /^[A-Z]+$/,
				}],
				role_description: [{
					required: true,
					message: '请输入角色描述',
					trigger: 'blur',
				}],
			},
			props: {
				label: '',
				children: ''
			},
		}
	},
	created() {
		this.loadList();
	},
	methods: {
		async loadList() {
			let { status, msg, data } = await Role.list({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
		handleInsert() {
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					let { status, msg, data } = await Role.add({ ...this.insert_form });
					if (status) {
						// 操作DOM
						this.tableData.push({ ...this.insert_form, ...data });
						// 关闭弹窗
						this.insert_dialog_visible = false;
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}
			});
		},
		handleCloseDialog(formName) {
			this.$refs[formName].resetFields();
		},
		openEditDialog(role) {
			//缓存当前操作role
			this.current_role = role;
			//还原表单
			this.edit_form = { ...role };
			//打开弹窗
			this.edit_dialog_visible = true;
		},
		async handleEdit() {
			let { role_id } = this.edit_form;
			try {
				let valid = await this.$refs.edit_form.validate();
				if (valid) {
					let { status, msg } = await Role.edit(role_id, { ...this.edit_form });
					if (status) {
						// 操作DOM
						Object.assign(this.current_role, this.edit_form);
						// 关闭弹窗
						this.edit_dialog_visible = false;
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}
			} catch (error) {
				console.log(error);
			}
		},
		handleRemove(role_id, index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					//删除标签
					let { status, msg } = await Role.remove(role_id);
					if (status) {
						//操作DOM
						this.tableData.splice(index, 1);
						//信息提示
						this.$message.success(msg);
					} else {
						//信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除');
				});
		},
		openSetDialog(role) {
			//缓存当前操作role
			this.current_role = role;
			//还原表单
			this.edit_form = { ...role };
			//打开弹窗
			this.set_dialog_visible = true;
		},
		next() { }
	},
}
</script>

<style>
.limit-link {
	margin-left: 10px;
	border: 0;
}
</style>